<template>
    <div ref="dropdownRef" class="dropdown">
        <!-- @mouseover="showDown = true" @mouseout="showDown = false"  -->
        <a href="javascript:void(0)" class="btn btn-outline-light my-2 dropdown-toggle">{{ title }}</a>
        <ul v-if="slots.default" class="dropdown-menu" :style="{ display: showDown ? 'block' : 'none' }">
            <slot />
        </ul>
    </div>
</template>

<script lang="ts">
import { ref, onMounted, watch } from "vue";
import useIsMouseOver from "@/hooks/useIsMouseOver";
export default {
    props: {
        title: {
            type: String,
        },
    },
    setup(props, context) {
        let dropdownRef = ref<null | HTMLElement>(null);
        let showDown = useIsMouseOver(dropdownRef);
        return {
            showDown,
            slots: context.slots,
            dropdownRef,
        };
    },
};
</script>

<style lang="scss" scoped>
.dropdown-menu{
    margin-top: 0;
}
</style>
